<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>用户登录</title>
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    .text {
      font-size: 14px;
    }

    .item {
      padding: 18px 0;
    }

    .box-card {
      width: 480px;
    }
    body{
      background-image: url("./imgs/bg.jpg");
      margin: 0;
      background-size: cover;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-attachment: fixed;
      text-align: center;
    }
    .el-form-item__label{
      font-weight: bold;
      color: black;
    }
  </style>
</head>
<body>
<div id="app">
<h1>用户登录</h1>
  <el-card class="box-card" style="width: 500px; height: 300px; margin: 60px auto; background-color: rgba(173,216,230,0.5)">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"style="width: 400px; margin: 50px auto;">

      <el-form-item label="联系电话" prop="tel">
        <el-input v-model.number="ruleForm.tel"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()"style="position: relative; right: 36px">登录</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</div>
</body>
<!--import axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import elementUI -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
   data() {
     var checkContact = (rule, value, callback) => {
       if (!value) {
         return callback(new Error('号码不能为空'));
       }
       setTimeout(() => {
         if (!Number.isInteger(value)) {
           callback(new Error('请输入数字值'));
         }else {
           callback();
         }
       }, 1000);
     };
     var validatePass = (rule, value, callback) => {
       if (value === '') {
         callback(new Error('请输入密码'));
       } else {
         if (this.ruleForm.checkPass !== '') {
           this.$refs.ruleForm.validateField('checkPass');
         }
         callback();
       }
     };
     return {
       ruleForm: {
         tel:'13912345678',
         password: '000000',
       },
       rules: {
         tel: [
           { validator: checkContact, trigger: 'blur' }
         ],
         password: [
           { validator: validatePass, trigger: 'blur' }
         ],
       },
     };
   },
   methods: {
     submitForm() {
       axios.post("/login",v.ruleForm).then(function (response) {
         if (response.data==1){
           alert("登录成功！")
           location.href="/customercenter.html";
         }else if (response.data==2){
           alert("密码错误！")
         }else{
           alert("号码不存在！")
         }
       })
     },
     resetForm(formName) {
       this.$refs[formName].resetFields();
     }
   }
  })
</script>
</html>